<template>
    <view>
       <view>
			<swiper :indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#FF0000"  :autoplay="true"
			 :interval="3000" :duration="1000" circular class="lbt" >
				<swiper-item>
					<view class="swiper-item">
						<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590560856527&di=03b249554cf1b9fd42e0b6cdf353282e&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F9419049955%2F0.jpg" style="width: 100%;height: 500rpx;"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590560750529&di=8cf5a26e650f2a8d0a92407e5f3fae8c&imgtype=0&src=http%3A%2F%2Fimg.d17.cc%2Fgroup5%2FM00%2F36%2F3D%2FAQAAAFta7AeIVshnAAEopMUdVLgAAAp5wP8Q1YAASi8894.jpg"
						 style="width: 100%;height: 500rpx;"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2688581557,673490578&fm=26&gp=0.jpg" style="width: 100%;height: 500rpx;"></image>
					</view>
				</swiper-item>
                <swiper-item>
					<view class="swiper-item">
						<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590560894168&di=54857e0e47042b0a3c4c0c09a701d831&imgtype=0&src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0522%2Ff60d0b1dj00qaqes6001ld200hn00cng008v006c.jpg" style="width: 100%;height: 500rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
            <view class="kuang1">
            <view v-show="isLogin">您好!<text class="nihao"> {{mine}}</text></view>
            <view v-show="noLogin">您好!<text class="login"   @click="Login" > 立即登录</text></view>
            <view class="zhunbei">准备好开启灵感寻味之旅了吗？</view>
            <view class="card">
                <view class="top">
                    <text class="GO">GO会员</text>
                    <text class="cheng">成为会员享双倍积分</text>
                    <view class="lv">Lv1</view>
                    <van-image id="tou" round width="5rem" height="5rem" 
                    :src="imgSrc"/>
                </view>
                <view class="bottom">
                    <view >
                        <van-icon name="send-gift-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">积分商城</view>
                    </view>
                    <view >
                        <van-icon name="bookmark-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">好物好券</view>
                    </view>
                    <view>
                        <van-icon name="pending-payment" class="icon" size="50px" />
                        <view class="yuan1">￥O.OO</view>
                        <view class="zi">我的钱包</view>
                    </view>
                    <view>
                        <van-icon name="gift-card-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">阿物有礼</view>
                    </view>
                </view>
            </view>
            <!--  -->
            <view class="bo">个人播报</view>
            <!--  -->
            <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" circular="true" :duration="duration">
                        <swiper-item >
                            <view class="swiper-item uni-bg-red one">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                :src='URL+img2' />
                                <view class="wenzi1">天天有喜，今天你最大</view>
                                <view class="wenzi2">你的心仪物品，我们优先给予</view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green two">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                :src="URL+img3" />
                                <view class="wenzi1">灵感来源，非你莫属</view>
                                <view class="wenzi2">生鲜&fruit上线</view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue three">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                :src="URL+img4" />
                                <view class="wenzi1">权益延期，长喜常安</view>
                                <view class="wenzi2">会员身份及优惠券有效期延长</view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
            <!--  -->
            <view class="renwu">
                <view class="left">
                    <text class="mm1">任务中心</text>
                    <text class="mm2">MISSION CENTER</text>
                </view>
                <view class="right">
                    <van-image  width="9.1rem" height="9.1rem"
                    :src="URL+img1" />
                </view>
            </view>
            <!--  -->
            <view class="libao">
                <view class="lbtop">
                    <view class="kaitong">开通礼包</view>
                    <view class="gengduo" >更多</view>
                </view>
                <!--  -->
                <view class="vbig">
                    <view class="big">
                        <view class="quan">
                            <van-icon name="hot-o" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">优先享券</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="logistics" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">免运费券</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="birthday-cake-o" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">赠品相送</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="paid" size="75" color="#755D4D" />
                        </view>
                        <text class="yi">买就减免</text>
                    </view>

                </view>
                <!--  -->
            </view>
            <!--  -->
            <!--
            <view class="huiyuanma" >
                <view class="h1">会员码</view>
                <view class="h2">门店扫码积分、喜茶钱包和阿喜有礼卡支付</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view> -->
            <van-popup :show="show" >
                <view id="popup">
                    <view></view>
                   <view  style="float:right"><van-icon name="cross" size="30" /></view>
                   <view class="dui d1">您想要兑换？</view>
                   <view class="dui d2"><van-icon name="discount" size="24" />优惠券</view>
                   <view class="dui d3"><van-icon name="friends-o" size="24"/>个人会员</view>
                   <view class="dui d4"><van-icon name="point-gift-o" size="24" />阿物有礼</view>
                </view>
                   
            </van-popup>
            <view class="huiyuanma" @click="ToMember" >
                <view class="h1">会员中心</view>
                <view class="h2">查看个人会员、惊喜优惠券和会员邀请码  </view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" @click="ToOrder" >
                <view class="h1">我的订单</view>
                <view class="h2">尊贵会员尊享订单记录，更多惊喜等着您</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view> 
            <view class="huiyuanma" @click="ToMyAddress" >
                <view class="h11">我的收货地址</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" @click="ToNew" >
                <view class="h12 ">我是新会员</view>
                <view class="h22">使用老用户的邀请码即可获得惊喜~</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" >
                <view class="h12 ">商家入驻</view>
                <view class="h22">商家入驻点我~</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" >
                <view class="h12 ">意见反馈</view>
                <view class="h22">您有什么意见建议都可以向我们反馈~~</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" >
                <view class="h1">更多</view>
                <view class="h2"></view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <van-toast id="van-toast" />
        </view>
		</view>
        
        <view v-show="isLogin"><van-button @click="exitLogin" block class="danger" type="danger">退出登录</van-button></view>
    </view>
</template>
<script>
import Toast from '../../wxcomponents/vant/dist/toast/toast'
export default {
    data(){
        return{
            URL:'http://47.108.197.149:8080/images/',
            name:'我的',
            mine:'',
            background: ['color1', 'color2', 'color3'],
            indicatorDots: false,
            autoplay: true,
            interval: 5000,
            duration: 500,
            show:false,
            imgSrc:'',
            img1:'img1.jpg',
            img2:'img2.jpg',
            img3:'img3.jpg',
            img4:'img4.jpg',
            LoginState:'',
        }
    },
    computed:{
        isLogin(){
            this.LoginState = getApp().globalData.isLogin  
            if(this.LoginState == true){
                return true
            }else{
                return false
            }
        },
        noLogin(){
            this.LoginState = getApp().globalData.isLogin 
            if(this.LoginState  == false){
                return true
            }else{
                return false
            }
        },
    },
    methods:{
        Login(){
            uni.navigateTo({
                url: '../Login/Login'
            });
            this.LoginState = true
        },
        exitLogin(){
            this.LoginState = false
            getApp().globalData.isLogin = false
            this.mine = ''
            this.imgSrc = ''
            getApp().globalData.userInfo[0] = {nickName:'',avatarUrl:'',userId:'',openId:'',inviteCode:'',address:'',consignee:'',phone:''}
        },
        ToMember(){
            let state = getApp().globalData.isLogin
            if(state == true){
                uni.navigateTo({
                    url: '../Members/Members'
                });
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
            
        },
        ToOrder(){
            let state = getApp().globalData.isLogin
            if(state == true){
                uni.navigateTo({
                    url: '../Order/Order'
                });
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
        },
        ToConfirm(){
            let state = getApp().globalData.isLogin
            if(state == true){
                uni.navigateTo({
                     url: '../Confirm/Confirm'
                });
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
        },
        ToMyAddress(){
            let state = getApp().globalData.isLogin
            if(state == true){
                uni.navigateTo({
                    url: '../Confirm/Confirm'
                });
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
        },
        ToNew(){
            let state = getApp().globalData.isLogin
            if(state == true){
                uni.navigateTo({
                    url: '../NewMember/NewMember'
                });
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
        }
    },
    onLoad(){
        this.mine = getApp().globalData.userInfo[0].nickName
        this.imgSrc = getApp().globalData.userInfo[0].avatarUrl
    },
    onPullDownRefresh(){
        this.mine = getApp().globalData.userInfo[0].nickName
        this.imgSrc = getApp().globalData.userInfo[0].avatarUrl
    },
    onTabItemTap(item){
        this.mine = getApp().globalData.userInfo[0].nickName
        this.imgSrc = getApp().globalData.userInfo[0].avatarUrl
        this.LoginState = getApp().globalData.isLogin
    }   

}
</script>
<style scoped>
.lbt{
    height: 500rpx;
}
.imagesize{
    display:flex;                    
    justify-content: center;         
}
.kuang1{
    margin: 0 30rpx 0 30rpx;
}
.nihao{
    font-size: 20px;
    color: #41291F;
}
.zhunbei{
    font-size: 14px;
    color: #41291F;
}
.card{
    margin-top: 15rpx;
    width: 100%;
    height: 350rpx;
    box-shadow: -2rpx 5rpx  10rpx 10rpx rgb(241, 240, 240);
}
.top{
    margin: 0 20rpx;
    position: relative;
    border-bottom: 1px solid rgb(233, 231, 231);
    height: 120rpx;
}
.bottom{
    margin: 0 40rpx;
    display: flex;
    justify-content:space-between;
}

.GO{
    font-size: 20px;
    color: #41291F;
    font-weight: 500;
    display: inline-block;
    padding-top: 20rpx;
}
.cheng{
    display: inline-block;
    font-size: 12px;
    width: 320rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    margin-left: 15rpx;
    border-radius: 20rpx;
    color: #41291F;
    background-color: rgb(228, 226, 226);
}
#tou{
    position: absolute;
    right: 10rpx;
    top: -70rpx;
}
.lv{
    position: absolute;
    width: 70rpx;
    font-size: 12px;
    line-height: 30rpx;
    text-align: center;
    height: 30rpx;
    border: 1px solid #41291F;
    border-radius: 8rpx;
}
.icon{
    color: #97928F;
    font-weight: 100;
    margin-left: 10rpx;
}
.yuan{
    color: #41291F;
    margin-left: 50rpx;
    font-weight: 600;
}
.yuan1{
    color: #41291F;
    font-weight: 600;
}

.zi{
    margin-top: 15rpx;
    font-style: 12px;
    color: #343434;
}
.one{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.two{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.three{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.bo{
    margin-top: 30rpx;
}
.tu1{
    position: absolute;
    top: 50rpx;
    left: 50rpx;
}
.wenzi1{
    position: absolute;
    top: 65rpx;
    font-weight: 400;
    left: 180rpx;
    font-style: 14px;
    color: #41291F;
}
.wenzi2{
    position: absolute; 
    left: 180rpx;
    top: 115rpx;
    font-size: 10px;
    color: #41291F;
}
.renwu{
    width: 100%;
    height: 300rpx;
    display: flex;
    background-color: #fff;
    box-shadow: -4rpx 10rpx  15rpx 15rpx rgb(241, 240, 240);
}
.mm1{
    width: 100%;
    height: 40rpx;
    font-size: 12px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    color: #422A20;
}
.mm2{
    width: 100%;
    height: 40rpx;
    text-align: center;
    font-size: 10px;
    color: #422A20;
    font-family: inherit;
}
.left{
    width: 55%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.right{
    width: 45%;
    height: 100%;
}
.libao{
    margin-top: 80rpx;
    width: 100%;
    height: 350rpx;
    margin-bottom: 50rpx;
}
.lbtop{
    display: flex;
    justify-content: space-between;
}

.gengduo{
    color: #5C5C5C;
    font-size: 14px;
}
.quan{
    width: 150rpx;
    height: 150rpx;
    text-align: center;
    line-height: 200rpx;
    box-shadow: -2rpx 5rpx  10rpx 10rpx rgb(241, 240, 240);
    border-radius: 150rpx;
}
.yi{
    position: absolute;
    left: 15rpx;
    top: 180rpx;
    font-size: 14px;
}
.big{
    position: relative;
    margin-top: 30rpx;
}
.vbig{
    display: flex;
    justify-content: space-around;
}
.huiyuanma{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 120rpx;
    border-bottom: 1px solid #EFF2F5;
}
.h1{
    width: 23%;
    line-height: 120rpx;
}
.h11{
    width: 50%;
    line-height: 120rpx;
}
.h12{
    width: 30%;
    line-height: 120rpx;
}
.h22{
    width: 70%;
    font-size: 12px;
    line-height: 120rpx;
    text-align: right;
    color: #C3C4C8;
    padding-right: 20rpx;
}
.nn{
    font-size: 14px;
}
.h2{
    width: 75%;
    font-size: 12px;
    line-height: 120rpx;
    text-align: right;
    color: #C3C4C8;
    padding-right: 20rpx;
}
#popup{
    width: 400rpx;
    height: 500rpx;
    position: relative;
}
.dui{
    position: absolute;
}
.d1{
    font-size: 20px;
    text-align: center;
    line-height: 65rpx;
    width: 280rpx;
    height: 65rpx;
    top: 60rpx;
    left: 60rpx;
}
.d2{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 160rpx;
    left: 60rpx;
    border: 1px solid black;
}
.d3{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 270rpx;
    left: 60rpx;
    border: 1px solid black;
}
.d4{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 380rpx;
    left: 60rpx;
    border: 1px solid black;
}
.login{
    margin-left: 10rpx;
    font-size: 18px;
    color: gold;
    text-decoration-line: underline;
    display: inline-block;
}
.danger{
    margin: auto;
    width: 80%;
}
</style>